<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>影厅列表</title>
	<link rel="stylesheet" href="../layui/css/layui.css">

	<style>
		/*设置数据表表头字体*/
		.layui-table th {
			/*表头内容居中显示*/
			text-align: center;
			/*字体加粗*/
			font-weight: bold;
		}
		/* 设置表格宽度 */
		.layui-table {
			width: 98%;
		}
		/* 设置鼠标经过图标变色 */
		.layui-icon:hover {
			color: red;
		}
		/* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
	</style>
</head>
<body>
	<div style="margin-top:20px;">
		<a href="hall_add.html"><button class="layui-btn layui-btn-normal"><i
					class="layui-icon">&#xe654;</i>添加影厅</button></a>
	</div><br />


	<table class="layui-table" id="hall-list" v-cloak>
		<thead>
			<tr>
				<th>ID</th>
				<th>影厅名称</th>
				<th>类型</th>
				<th>座位数量</th>
				<th>行列</th>
				<th>操作</th>
			</tr>
		</thead>

		<tbody>
			<tr align="center" v-for="(h,i) in halls" :key="i">
				<td>{{h.hallId}}</td>
				<td>{{h.hallName}}</td>
				<td>{{h.hallType}}</td>
				<td>{{h.hallNumber}}</td>
				<td>{{h.rowsCols}}</td>
				<td>
					<a @click="update(h)"><i class="layui-icon" style="font-size: 18px;" title="修改">&#xe642;</i></a>
					<a @click="del(i,h.hallId)"><i class="layui-icon" style="font-size: 18px;" title="删除">&#xe640;</i></a>
				</td>
			</tr>

			<tr v-if="halls==null || halls.length==0">
				<td colspan="6" align="center">无数据</td>
			</tr>
		</tbody>

	</table>


	<script src="../js/jquery-1.12.4.min.js"></script>
	<script src="../js/Vue.js"></script>
	<script src="../layer/layer.js"></script>
	<script src="../layui/layui.js"></script>
	<script src="js/manage-hall.js"></script>
	
</body>
</html>